﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>TweenMax demon</title>
        <script src="minified/TweenMax.min.js"></script>
        <script src="minified/jquery-1.10.1.min.js"></script>
        <script src="minified/jquery-ui.min.js"></script>
        <script src="minified/kinetic-v5.1.0.min.js"></script>
        <!--tweenmax中文网演示实例 www.tweenmax.com.cn-->
		<!-- Demo styles -->
		<style>
		body{
  background-color:#333;
  margin:0;
}

#container{
  background-color:black;
  width:970px;
  height:390px;
}

#logo{
  position:absolute;
  left:805px;
  top:335px;
  z-index:1;
}

#slider{
position:relative;  
width:600px;
height:10px;
top:20px;  
left:25px;
background-color:rgba(255, 255, 255, 0.2);
}

.ui-slider-handle{
		  margin-left: -5px !important; 
		  height:20px !important; 
		  margin-top:0px !important;
		  width:10px;
		  display:block;
		  position:absolute;
		  background:#fff;
		  top:-5px;
		  border-radius:3px;
		}
		</style>
	</head>
	<body>

<div id="container"></div>
<div id="slider"></div>

	<script>
var appHeight = 390,
    appWidth = 970,
    appCenterX = appWidth/2,
    appCenterY = appHeight/2,
    stage = new Kinetic.Stage({
       container: 'container',
       width: appWidth,
       height:appHeight
     }),
    layer = new Kinetic.Layer(),
    bugFile = new Image(),
    tl;

stage.add(layer);
bugFile.src = "images/creature.png";

function getAnimation() {
  var creature = new Kinetic.Image({
    image: bugFile,
    width:27,
    height:29,
    x:-50
  });

  //bezier magic provided by GSAP BezierPlugin (included with TweenMax)
  //https://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html
  var bezTween = new TweenMax(creature, 6, {
    bezier:{
      type:"soft", 
      values:[{setX:150, setY:300}, {setX:300, setY:-10}, {setX:500 + Math.random() *100, setY:320*Math.random() + 50}, {setX:650, setY:320*Math.random() + 50}, {setX:900, setY:-80}], 
      //autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
autoRotate:["setX","setY","setRotationDeg"]
    }, 
    ease:Linear.easeNone, autoCSS:false});
  
  layer.add(creature); 
  
  return bezTween;
  
}

//create a bunch of Bezier tweens and add them to a timeline
function buildTimeline() {
  tl = new TimelineMax({repeat:-1, onUpdate:updateSlider, delay:1});
  for (i = 0 ; i< 30; i++){
    //start creature animation every 0.12 seconds
  tl.add(getAnimation(), i * 0.17);
  }
}

function redraw(){
  layer.draw();
}


$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  slide: function ( event, ui ) {
    tl.pause();
    //adjust the timeline's progress() based on slider value
    tl.progress( ui.value/100 );
    }
});	
		
function updateSlider() {
  $("#slider").slider("value", tl.progress() *100);
} 		


$("#slider, .ui-slider-handle").mousedown(function() {
  $('html, #slider, .ui-slider-handle').one("mouseup", function(e){
    tl.resume();
  });
});















//redraw layer each time a tick event fires
TweenLite.ticker.addEventListener("tick", redraw);
buildTimeline();
    </script>
	</body>
</html>